<template>
    <el-dropdown v-if="theme.showLanguage" @command="handleCommand">
        <vab-icon icon="translate"/>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="en-US">English</el-dropdown-item>
                <el-dropdown-item command="zh-CN">简体中文</el-dropdown-item>
                <el-dropdown-item command="zh-TW">繁體中文</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script lang="ts">
import Vue from 'vue'
import getPageTitle from '@/utils/pageTitle'
import Component from 'vue-class-component';
import {SettingMutationEnum, SettingsGetterEnum} from "../../../store/enum/store.enum";

@Component({})
export default class VabLanguage extends Vue {
    get theme() {
        return this.$store.getters[SettingsGetterEnum.theme];
    };

    private changeLanguage(val: string) {
        this.$store.commit(SettingMutationEnum.changeLanguage, val);
    };

    private handleCommand(command:string) {
        this.changeLanguage(command)
        this.$i18n.locale = command
        document.title = getPageTitle(this.$route.meta.title)
    };
}
</script>
